<template>
  <!-- 🎯 占位组件 - 微应用容器现在在 App.vue 中通过 Teleport 传送 -->
  <div class="micro-app-placeholder"></div>
</template>

<script setup lang="ts">
import { onMounted, onActivated, watch, nextTick } from 'vue';
import { useGlobalStore } from '@/store/modules/global';
import { storeToRefs } from 'pinia';

// 获取全局状态
const globalStore = useGlobalStore();
const { layout } = storeToRefs(globalStore);

// 🎯 激活微应用的核心逻辑
const activateMicroApp = () => {
  console.log('[Home.vue] 🔄 激活微应用');
  
  // 等待 DOM 更新完成后触发
  nextTick(() => {
    // 检查容器是否存在
    const container = document.getElementById('micro-container');
    console.log('[Home.vue] 容器状态:', container ? '存在' : '不存在');
    
    // 简单触发 popstate 事件，让 qiankun 检查当前路径并挂载对应的微应用
    setTimeout(() => {
      console.log('[Home.vue] 🔄 触发 popstate 事件');
      window.dispatchEvent(new PopStateEvent('popstate', { state: window.history.state }));
      console.log('[Home.vue] ✅ 已触发 popstate 事件');
    }, 50);
  });
};

// 首次挂载时激活
onMounted(() => {
  console.log('[Home.vue] 📌 组件挂载');
  activateMicroApp();
});

// 🎯 监听布局变化，重新激活微应用
watch(layout, (newLayout) => {
  console.log('[Home.vue] 📐 布局变化:', newLayout);
  // 布局变化时，容器不会被销毁（在 App.vue 中），但需要确保微应用正确显示
  activateMicroApp();
});

// 🎯 keep-alive 激活时也要激活（从其他页面返回时）
onActivated(() => {
  console.log('[Home.vue] 🔄 组件激活');
  activateMicroApp();
});
</script>

<script lang="ts">
// 🔧 必须用传统方式定义 name，确保 keep-alive 能识别
export default {
  name: 'MicroAppHome'
};
</script>

<style scoped>
/* 占位组件，不显示任何内容 */
.micro-app-placeholder {
  display: none;
}
</style>